<template>
  <el-card>
    <el-form class="filter-form" label-position="top">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-form-item label="平台">
            <el-select v-model="payloadFilter.platforms" multiple clearable placeholder="请选择平台" @change="selectPlatform">
              <el-option v-for="item in platformList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="商家">
            <el-select v-model="payloadFilter.brands" multiple clearable placeholder="请选择商家">
              <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id">
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.platform.name }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4" style="border-left: 1px white solid;border-top: 1px white solid;border-bottom: 1px white solid;">
          <el-form-item label="增加筛选">
            <el-button type="primary" style="width: 100%" @click="addFilter">添加<i class="el-icon-bottom" /></el-button>
          </el-form-item>
        </el-col>
        <el-col :span="4" style="border-top: 1px white solid;border-bottom: 1px white solid;">
          <el-form-item label="筛选字段">
            <el-select v-model="filters.field" clearable class="input-with-select" filterable placeholder="过滤条件">
              <el-option v-for="(item,ind) in fromData.fields" :key="ind" :label="item.alias" :value="item.column" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4" style="border-top: 1px white solid;border-bottom: 1px white solid;">
          <el-form-item label="筛选值">
            <el-input v-model="filters.value" />
          </el-form-item>
        </el-col>
        <el-col :span="4" style="border-top: 1px white solid;border-bottom: 1px white solid;border-right: 1px white solid">
          <el-form-item label="过滤条件">
            <el-select v-model="filters.symbol" clearable class="input-with-select" filterable placeholder="过滤条件">
              <el-option
                v-for="(symbolItem,ind) in fromData.symbol"
                :key="ind"
                :label="symbolItem"
                :value="symbolItem"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="已选条件">
            <el-row :gutter="10">
              <el-col v-for="(filterItem, index) in payloadFilter.filters" :key="index" :span="12">
                <el-tag closable @close="delTag(index)">
                  <span class="padd-left">{{ filterItem.field }}</span>
                  <span class="padd-left">{{ filterItem.symbol }}</span>
                  <span class="padd-left">{{ filterItem.value }}</span>
                </el-tag>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" style="width: 100%" @click="onSubmit">Run <i class="el-icon-right" /></el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import {
  getBrands,
  getPlatform
} from '@/api/remote-search'
import {
  fieldAlias
} from '@/api/remote-search.js'
export default {
  name: 'Panel',
  data() {
    return {
      // 平台列表
      platformList: [],
      // 商家
      brandList: [],
      fromData: {
        symbol: ['>', '<', '<=', '>=', '=', '!=', 'like', 'not like', 'is null', 'is not null'],
        fields: []
      },
      filters: {
        field: '',
        symbol: '',
        value: ''
      },
      // 提交的数据格式
      payloadFilter: {
        // 选择的平台
        platforms: [],
        brands: [],
        filters: []
      }
    }
  },
  mounted() {
    // 加载平台
    this.loadPlatform()
    this.SelectFieldName()
  },
  methods: {
    selectPlatform() {
      getBrands({
        platforms: this.payloadFilter.platforms
      }).then((res) => {
        this.brandList = res.data
      })
    },
    addFilter() {
      this.payloadFilter.filters.push({
        field: this.filters.field,
        symbol: this.filters.symbol,
        value: this.filters.value
      })
      this.$set(this.payloadFilter, 'ret', {})
    },
    SelectFieldName() {
      fieldAlias({
        table_name: 'shop_info'
      }).then((res) => {
        this.fromData.fields = res.data
      })
    },
    onSubmit() {
      this.$emit('filterDataEmit', this.payloadFilter)
    },
    delTag(index) {
      this.payloadFilter.filters.splice(index, 1)
    },
    loadPlatform() {
      getPlatform().then((res) => {
        this.platformList = res.data
      })
    }
  }
}
</script>
<style lang="scss">
.el-card{
  background-color: transparent;
  color: #FFFFFF;
  border: none;
  label{
    color: #FFFFFF;
  }
}
  .padd-left{
    margin-left: 3px;
  }
  .el-select {
    width: 100%;
  }

  .input-with-select .el-input-group__prepend {
    background-color: #fff;

    .el-select .el-input {
      width: 100px;
    }
  }
</style>
